import { Outlet } from "react-router";

import * as React from "react"
import { Link } from "react-router"

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"
import { ThemeTrigger } from "./theme-trigger";
type Component = { title: string; href: string; description: string }
const components: Component[] = [
  {
    title: "表单",
    href: "/disable",
    description:
      "表单测试",
  },
  {
    title: "拖拽",
    href: "/drag-test",
    description:
      "拖拽测试",
  },
  {
    title: "表格",
    href: "/tabledata",
    description:
      "表格测试",
  },
  {
    title: "请求工具对比",
    href: "/fetcher-test",
    description: "对请求工具 ky 的测试用例",
  },
  {
    title: "session 测试",
    href: "/session-test",
    description: "session 测试",
  },


]

/**
 * 博客案例
 */
const blogs: Component[] = [
  {
    title: "ky 测试",
    href: "/blogs/fetcher-test",
    description: "对请求工具 ky 的测试用例",
  },
  {
    title: "Stream 技术与应用",
    href: "/blogs/stream",
    description: "使用 mp3 文件作为流媒体，使用 MediaSource API 和 SourceBuffer API 实现音频播放",
  },
]

export function NavigationMenuDemo() {
  return (
    <NavigationMenu >
      <NavigationMenuList>
        <NavigationMenuItem >
          <NavigationMenuLink href="/" >
            首页
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>实验</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
              {components.map((component) => (
                <ListItem
                  key={component.title}
                  title={component.title}
                  href={component.href}
                >
                  {component.description}
                </ListItem>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>

        <NavigationMenuItem>
          <NavigationMenuTrigger>博客案例</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
              {blogs.map((component) => (
                <ListItem
                  key={component.title}
                  title={component.title}
                  href={component.href}
                >
                  {component.description}
                </ListItem>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
            <Link to="https://notes.lucardo.website" target="_blank">个人网站</Link>
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

function ListItem({
  title,
  children,
  href,
  ...props
}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
  return (
    <li {...props}>
      <NavigationMenuLink asChild>
        <Link to={href}>
          <div className="text-sm leading-none font-medium">{title}</div>
          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
            {children}
          </p>
        </Link>
      </NavigationMenuLink>
    </li>
  )
}

export default function Layout() {
  return (
    <div className="max-w-screen-lg mx-auto">
      <header className="p-4 flex justify-between items-center">
        <NavigationMenuDemo />
        <ThemeTrigger />
      </header>
      <Outlet />
    </div>
  )
}